<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			table {
		        margin-top: 20px;
		        width: 800px;
		        border: 1px solid #ddd;
		        border-collapse: collapse;
		    }
		
		    td,
		    th {
		        border: 1px solid #ddd;
		        padding: 5px 10px;
		    }
		
		    td {
		        padding: 0;
		        height: 30px;
		    }
		
		    td input {
		        width: 100%;
		        height: 30px;
		        border: none;
		        background-color: #ffc;
		    }
		</style>
	</head>
	<body>
		<label for="username">姓名</label>
		<input type="text" id="username" name="username">
		<label for="age">年龄</label>
		<input type="text" id="age" name="age">
		<label for="tel">电话</label>
		<input type="text" id="tel" name="tel">
		<label for="qq">QQ号</label>
		<input type="text" id="qq" name="qq">
		<button id="btnSave">保存</button>
		<div class="list">
			<table id="tableList">
				<thead>
					<tr>
						<th width="40">序号</th>
						<th width="160">姓名</th>
						<th width="60">年龄</th>
						<th width="160">电话</th>
						<th width="160">QQ号</th>
						<th width="240">操作</th>
					</tr>
				</thead>
				<tbody>
					<!-- <tr>
						<td></td>
					</tr> -->
				</tbody>
			</table>
			<script type="text/javascript">
				window.onload = function() {


					/*
				动态生成可编辑表格
					1）生成表格
						1>序号
							1-n
						2>数据
							根据输入值确定数据
						3>删除
							显示删除按钮
					2）表格编辑
						1>点击td时,生成一个输入框
						2>把td的内容赋值给输入框
						3>把输入框添加到td
					3）保存编辑
						把输入框的值写入td
			 */
					//获取页面元素
					var username = document.querySelector('#username');
					var age = document.querySelector('#age');
					var tel = document.querySelector('#tel');
					var qq = document.querySelector('#qq')
					var btnSave = document.querySelector('#btnSave');
					var tableList = document.querySelector('#tableList');
					var tbody = tableList.children[1];
					//序号
					var index = 1;
					btnSave.onclick = function() {
						//创建行
						var tr = document.createElement('tr')
						//给可编辑表格添加class 名为 name

						tr.innerHTML = '<td>' + index++ + '</td>' +
							'<td class="name" >' + username.value + '</td>' +
							'<td class="name" >' + age.value + '</td>' +
							'<td class="name" >' + tel.value + '</td>' +
							'<td class="name" >' + qq.value + '</td>' +
							'<td >' + '<button class="upBtn">上移一格</button>' + '<button class="downBtn">下移一格</button>' +
							'<button class="delteBtn">删除</button>' + '</td>';

						tbody.appendChild(tr);
						tr.className='active';
						//获取删除按钮
						var delteBtn = document.getElementsByClassName('delteBtn');
						for (var i = 0; i < delteBtn.length; i++) {
							//循环绑定获取到的所有按钮
							delteBtn[i].onclick = function() {
								//进行删除tr的操作
								tbody.removeChild(this.parentNode.parentNode);

							}
						}

						//创建一个表示 表示tr里面是否 有input 元素
						var flag = false;
						//获取 绑定了 class 为name的 <td>
						var $name = document.querySelectorAll('.name');
						$name.forEach(function (item, index) {
							item.onclick = function() {

								if (!flag) {
									var inputs = document.createElement('input');
									//获取原来td里的内容 将内容传给input
									inputs.value = item.innerHTML;
									//清空原来的<td>
									item.innerHTML = '';
									//将input 添加到td中 
									item.appendChild(inputs);
									//让input 自动获取焦点
									inputs.focus();
									//添加完成后 将标识给为 true 表示已有input
									flag = true;

								}
								//当input 失去焦点的时候 ，移出input元素 并且input的内容给到 <td>

								inputs.onblur = function() {
									//失去焦点时 把标识给为false
									flag = false;
									//拿input的值来替换item 的 内容

									item.innerHTML = inputs.value;
										
								}



							}



						})
						
						var upBtn=document.querySelectorAll('.upBtn');
						var downBtn=document.querySelectorAll('.downBtn')
						
						upBtn.forEach(function(items,index){
							 items.onclick=function(){
									var _row = items.parentNode.parentNode;
									  var _rowe=items.parentNode.parentNode.previousSibling;
										var  tro=items.parentNode.parentNode.parentNode;
										 
										 tro.insertBefore(_row,_rowe);
										 // console.log(items)
									/* 	 if(_rowe.nodeType==8){
											 
											 alert(1)
										 }*/
									} 
									})
	
							downBtn.forEach(function(ite,index){
								ite.onclick=function(){
									var _row = ite.parentNode.parentNode;
									  var _rowe=ite.parentNode.parentNode.nextSibling;
										var  tro=ite.parentNode.parentNode.parentNode;
										 
										 tro.insertBefore(_rowe,_row);
									// console.log(ite)
									
									/* if(_rowe===''){
										alert(1)
										
										} */
									}
								
								
							});
						
						
						
					};


				};
			</script>
	</body>
</html>
